<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品管理</title>
    <meta name="description" content="商品库存管理系统">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: "#3b82f6",
                        secondary: "#64748b"
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-50 min-h-screen">
<header class="bg-white shadow-sm">
    <nav class="container mx-auto px-4 py-4 flex justify-between items-center">
        <h1 class="text-xl font-bold text-gray-800">商品管理</h1>
        <div class="flex items-center space-x-4">
            <span class="text-gray-600" th:text="${session.get('merchant').mname}">用户名</span>
            <a href="/doLogout" class="text-blue-500 hover:text-blue-700">退出登录</a>
        </div>
    </nav>
</header>

<main class="container mx-auto px-4 py-8">
    <div class="flex justify-between items-center mb-6">
        <div class="flex">
            <h2 class="text-2xl font-semibold text-gray-800">商品库存</h2>
            <input type="text" id="title" name="title"
                   class="block w-full pl-5 pr-3 py-3 border border-gray-300 rounded-lg input-focus focus:border-purple-500 focus:outline-none transition duration-150"
                   placeholder="输入商品名"
                   oninput="searchContentChange(event)">
        </div>
        <a th:href="@{/upload}" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition">
            添加新商品
        </a>
    </div>

    <!-- 全选，反选，全不选 -->
    <div class="flex items-center mb-4">
        <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md mr-2"
                onclick="$('.checkbox').prop('checked', true)">全选
        </button>
        <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md mr-2"
                onclick="$('.checkbox').prop('checked', false)">全不选
        </button>
        <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md mr-2"
                onclick="$('.checkbox').each(function() { $(this).prop('checked', !$(this).prop('checked')); })">反选
        </button>
    </div>
    <div class="bg-white shadow rounded-lg overflow-hidden" id="table_refresh" th:fragment="table_refresh">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
            <tr>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    编号
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    图片
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    名称
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    价格
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    状态
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    操作
                </th>
            </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
            <tr th:each="goods : ${goodsList}">
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    <input type="checkbox" th:id="'checkbox' + ${goods.id}" class="checkbox h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500" th:text="${goods.id}">1</td>
                <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex-shrink-0 h-10 w-10">
                        <img th:if="${goods.img != null}"
                             th:src="${goods.img}"
                             alt="商品图片"
                             class="h-10 w-10 rounded-md object-cover">
                        <div th:unless="${goods.img != null}"
                             class="h-10 w-10 rounded-md bg-gray-200 flex items-center justify-center">
                            <span class="text-xs text-gray-500">暂无图片</span>
                        </div>
                    </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900" th:text="${goods.title}">
                    商品名称
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"
                    th:text="${'￥' + #numbers.formatDecimal(goods.price, 1, 2)}">￥19.99
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500" th:text="${goods.state==0?'上架':'下架'}">
                    上架
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <a th:href="@{'/upload/' + ${goods.id}}"
                       class="text-blue-500 hover:text-blue-700 mr-3">编辑</a>
                    <a class="text-red-500 hover:text-red-700" th:onclick="'delGoods('+${goods.id}+')'"
                       style="cursor: pointer">删除</a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <!-- 分页 -->
    <div class="mt-6 flex justify-between items-center" th:if="${totalPage > 1}">
        <div>
            <p class="text-sm text-gray-700">
                显示 <span class="font-medium" th:text="${currentPage * pageSize - pageSize + 1}">1</span>
                到 <span class="font-medium"
                        th:text="${currentPage * pageSize > total ? total : currentPage * pageSize}">10</span>
                共 <span class="font-medium" th:text="${total}">100</span> 条结果
            </p>
        </div>
        <div class="flex space-x-2">
            <a th:href="@{'/manage?page='+(${currentPage > 1 ? currentPage - 1 : 1})+'&pageSize=5'}"
               class="px-3 py-1 border rounded-md"
               th:classappend="${currentPage == 1} ? 'text-gray-400 cursor-not-allowed' : 'text-blue-500 hover:bg-blue-50'">
                上一页
            </a>
            <a th:href="@{'/manage?page='+(${currentPage < totalPage ? currentPage + 1 : totalPage})+'&pageSize=5'}"
               class="px-3 py-1 border rounded-md"
               th:classappend="${currentPage == totalPage} ? 'text-gray-400 cursor-not-allowed' : 'text-blue-500 hover:bg-blue-50'">
                下一页
            </a>
        </div>
    </div>
</main>
<script th:inline="javascript">
    function searchContentChange(event) {
        const searchInput = event.target
        $('#table_refresh').load(`/manage/search?page=1&pageSize=5&keyword=${searchInput.value}`)
    }

    function delGoods(id) {
        if (window.confirm('确定删除吗？')) {
            const page = [[${currentPage}]]
            const pageSize = [[${pageSize}]]
            $.ajax({
                url: `/delete/${id}`,
                type: 'DELETE',
                success: function (result) {
                    if (result.success) {
                        alert('删除成功');
                        $('#table_refresh').load(`/manage/search?page=${page}&pageSize=${pageSize}&keyword=${$('#title').val()}`);
                    } else {
                        alert('删除失败');
                    }
                },
                error: function () {
                    alert('删除失败');
                }
            });
        }
    }
</script>
</body>
</html>